<template>
	<view>
		<!--顶部搜索框-->
		<view class="searchBox">
			<view class="searchName">
				<input class="fs30 searchTitle" placeholder="请输入关键字" name="input"></input>
				<view class="fs30 searchKey">搜名字</view>
			</view>
			<view class="searchTime">
				<input class="fs30 searchTitle"  placeholder="请选择时间" name="input"></input>
				<view class="fs30 searchKey">搜时间</view>
			</view>
		</view>
		
		<!--滑动-->
		<view class="banner">
			<view class="fs30 allTeachers"> 全部</view>
			<view class="fs30 follow"> 关注</view>
		</view>
		
		<!--老师列表-->
		<view class="teachersList" v-for="(item,index) in teachersList">
			<view class="teacherInformation" @click="goto('/pages/index/schedule')">
				<view class="teacherPho">
					<image :src="item.pho">
				</view>
				<view class="teacherStats">
					<view class="teacherName">{{item.name}}</view>
					<view class="teacherSchedule">{{item.schedule}}</view>
				</view>
			</view>
		</view>
		<view class="dezziList">
			<view class="dezziInformation">
				<view class="dezziPho">
					<image src="../../static/teachersimg/dezzi.jpg">
					<view class="fs30 courseTitle">固定课</view>	
				</view>
				
				<view class="dezziStats">
					<view class="dezziName">dezzi</view>
					<view class="dezziTitle">金牌讲师</view>
					<view class="dezziTitle">擅长儿童课程</view>
					<view class="dezziTitle">power up</view>
					<view class="dezziTitle">think</view>
					<view class="dezziTitle">ket</view>
					<view class="dezziTitle">pet</view>
					<view class="dezziTitle">启蒙衔接课</view>
					<view class="dezziSchedule">
						今天无，明天<view class="courseNumber">6</view>节，
						后天<view class="courseNumber">6</view>节
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	 
	export default {
		 
		data() {
			return{
			teachersList:[],
			};
		},
		watch: {
		 
		},
		onPageScroll(e) {
			 
		},
		onLoad(e) {
			
			// 获取邀请码保存到本地
			this.loadteachersList();
		},
		//下拉刷新
		onPullDownRefresh() {
		 
		},
		//加载更多
		onReachBottom() {
		 
		},
		onHide() {
			//离开页面时关闭吸顶功能,用于处理h5环境运行下'bottom' of null报错的问题
			this.enable = false
		},
		onShow() {
		 
		},
		methods: {
			goto(url){
				console.log("加载页面:" , url )
				uni.navigateTo({
					url 
				});
			},
			loadteachersList(){
				let tl = [
					{
						name:"Megan U.",
						schedule:"这三天都没排课",
						pho:"../../static/teachersimg/megan.jpg",
					},
					{
						name:"christie.",
						schedule:"这三天都没排课",
						pho:"../../static/teachersimg/christie.jpg",
					},
				];
				
				this.teachersList = tl;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #ffffff;
	}
	.fs30{
		font-size: 30rpx;
	}
	.searchBox{
		border: 0rpx solid #ff0000;
		height: 200rpx;
	}
	.searchName{
		border: 0rpx solid #ff0000;
		height: 70rpx;
		width: 90%;
		margin-left: 30rpx;
		margin-top: 20rpx;
		display: flex;
	}
	.searchTitle{
		border: 1rpx solid #f6f6f6;
		border-radius: 10rpx 0rpx 0rpx 10rpx;
		background-color: #f6f6f6;
		color: #c6c6c6;
		height: 70rpx;
		width: 65%;
		font-weight: bold;
		padding-left: 20rpx;
		padding-top: 14rpx;
		}
	.searchKey{
		border: 1rpx solid #07c160;
		border-radius: 0rpx 10rpx 10rpx 0rpx;
		background-color: #07c160;
		color: #ffffff;
		height: 70rpx;
		width: 35%;
		font-weight: bold;
		text-align: center;
		padding-top: 14rpx;
	}
	.searchTime{
		border: 0rpx solid #ff0000;
		height: 70rpx;
		width: 90%;
		margin-left: 30rpx;
		margin-top: 20rpx;
		display: flex;
	}
	.banner{
		border: 0rpx solid #ff0000;
		height: 70rpx;
		width: 90%;
		margin-left: 30rpx;
		display: flex;
	}
	.allTeachers{
		border: 1rpx solid #07c160;
		border-radius: 10rpx 0rpx 0rpx 10rpx;
		background-color: #07c160;
		color: #ffffff;
		height: 70rpx;
		width: 50%;
		font-weight: bold;
		text-align: center;
		padding-top: 14rpx;
	}
	.follow{
		border: 1rpx solid #f6f6f6;
		border-radius: 0rpx 10rpx 10rpx 0rpx;
		background-color: #f6f6f6;
		color: #c6c6c6;
		height: 70rpx;
		width: 50%;
		font-weight: bold;
		text-align: center;
		padding-top: 14rpx;
	}
	.teachersList{
		border: 1rpx solid;
		border-color: #c6c6c6 #ffffff;
		height: 170rpx;
		width: 90%;
		margin-left: 30rpx;
		margin-top: 20rpx;
	}
	.teacherInformation{
		border: 0rpx solid #ff0000;
		margin-top: 30rpx;
		margin-left: 30rpx;
		height: 100rpx;
		display: flex;
	}
	.teacherPho{
		border: 0rpx solid #ff0000;
		margin-right: 10rpx;
		width: 15%;
		height: 100rpx;
	}
	.teacherPho image{
		margin: 0rpx;
		border-radius: 10rpx;
		height: 100rpx;
	}
	.teacherStats{
		border: 0rpx solid #ff0000;
		margin-top: 10rpx;
		width: auto;
		display: inline-block;
		align-self: center;
	}
	.teacherName{
		color: #000000;
		font-size: 26rpx;
		font-weight: bold;
		line-height: 1.8;
	}
	.teacherSchedule{
		color: #07c160;
		font-size: 20rpx;
	}
	.dezziList{
		border: 1rpx solid;
		border-color: #c6c6c6 #ffffff;
		height: 240rpx;
		width: 90%;
		margin-left: 30rpx;
	}
	.dezziInformation{
		border: 0rpx solid #ff0000;
		margin-top: 30rpx;
		margin-left: 30rpx;
		height: 210rpx;
		width: 95%;
		display: flex;
	}
	.dezziPho{
		border: 0rpx solid #ff0000;
		margin-right: 10rpx;
		width: 15%;
		height: 210rpx;
	}
	.dezziPho image{
		margin: 0rpx;
		border-radius: 10rpx;
		width: 98%;
		height: 100rpx;
	}
	.courseTitle{
		border: 1rpx solid #07c160;
		border-radius: 10rpx;
		background-color: #07c160;
		height: 50rpx;
		color: #ffffff;
		text-align: center;
		font-size: 20rpx;
		font-weight: bold;
		margin-top: 10rpx;
		padding-left: 10rpx;
		padding-top: 10rpx;
	}
	.dezziStats{
		border: 0rpx solid #ff0000;
		height: auto;
		width: 78%;
	}
	.dezziName{
		color: #000000;
		font-size: 26rpx;
		font-weight: bold;
		line-height: 1.8;
	}
	.dezziTitle{
		border: 1px solid #efefef;
		border-radius: 10rpx;
		background-color: #efefef;
		width: auto;
		height: 50rpx;
		display: inline-block;
		color: #000000;
		text-align: center;
		font-size: 20rpx;
		padding: 10rpx;
		margin-right: 10rpx;
	}
	.dezziSchedule{
		margin-top: 20rpx;
		color: #07c160;
		font-size: 20rpx;
	}
	.courseNumber{
		color: #ff0000;
		display: inline-block;
	}
</style>